<template>
  <div class="powerPoint lxl-body">
    <div class="container lxl-box">
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        class="lxl-breadcrumb"
      >
        <el-breadcrumb-item>当前位置</el-breadcrumb-item>
        <el-breadcrumb-item>渔技学堂</el-breadcrumb-item>
        <el-breadcrumb-item>演示文稿</el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>

      <div class="search">
        <div class="searchPart">
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable
            @clear="handleQueryAllBtn"
            class="input-with-select"
          >
            <!-- 搜索 -->
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleQueryByKeysBtn"
            ></el-button>
          </el-input>
        </div>
      </div>
      <!-- 分类 -->
      <div class="format">
        <label for="">类型： </label>
        <el-button @click="handleQueryAllBtn">全部</el-button>
        <el-button
          v-for="item in formattab"
          :key="item.id"
          @click="handleQueryTypePPtBtn(item.id)"
          >{{ item.name }}</el-button
        >
      </div>
      <div class="lxl-card" v-loading="loading">
        <div class="PPT-item">
          <div v-for="item in pptlist" :key="item.id">
            <el-card class="card">
              <el-image :src="item.pic" class="image"> </el-image>
              <div>
                <div class="pptTitle">
                  <p style="padding: 10px">
                    {{ item.title }}
                  </p>
                </div>
                <div class="btns">
                  <span
                    class="el-icon-download"
                    style="color: green"
                    @click="getAllpptList"
                    ><a :href="item.contentUrl" :download="item.contentUrl"
                      >下载</a
                    ></span
                  >
                  <span
                    class="el-icon-view"
                    style="margin-right: 10px; color: #4398d0"
                    @click="bindPreview(item.contentUrl)"
                  >
                    查看</span
                  >
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
      <div class="pagination">
        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-size="8"
          layout="prev, pager,next, total, jumper"
          :total="total"
          style="padding-left: 200px; padding-top: 10px"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 搜索框
      input: "",
      select: "",
      // 演示文稿类型
      formattab: [],
      // 所有演示文稿
      pptlist: [],
      // 分页区域查询参数对象
      queryInfo: {
        query: "",
        pagenum: 1,
      },
      // 总数据条数
      total: 0,
      // 搜索分页
      // state:0 表示搜索全部，1表示按类型搜索，2表示按关键字搜索
      state: 0,
      // 加载页面
      loading: true,
      // 点击分类 根据id分页
      typeId: "",
    };
  },
  created() {
    // 所有演示文稿
    this.getAllpptList();
    // 分类
    this.getPPtTypes();
  },
  methods: {
    // 点击 全部 按钮
    handleQueryAllBtn() {
      this.state = 0;
      this.queryInfo.pagenum = 1;
      this.getAllpptList();
    },
    // 点击 各种类型 按钮
    handleQueryTypePPtBtn(id) {
      this.state = 1;
      this.queryInfo.pagenum = 1;
      this.getPPTbyTypeId(id);
    },
    // 点击 搜索 按钮
    handleQueryByKeysBtn() {
      this.state = 2;
      this.queryInfo.pagenum = 1;
      this.searchPPTList();
    },
    // 全部演示文稿
    async getAllpptList() {
      const { data: res } = await this.reqM2Service(
        "/education/manuscripts/findAll/" + this.queryInfo.pagenum + "/8",
        {
          params: this.queryInfo,
        },
        "get"
      );
      console.log(1);
      if (res.code !== 20000) {
        return this.$message.error("获取列表失败！");
      }
      this.pptlist = res.data.rows;
      this.total = res.data.total;
      this.loading = false;
      console.log(this.pptlist);
    },
    // 分页区域
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      if (this.state == 0) {
        this.getAllpptList();
      } else if (this.state == 1) {
        this.getPPTbyTypeId(this.typeId);
      } else if (this.state == 2) {
        this.searchPPTList();
      }
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      if (this.state == 0) {
        this.getAllpptList();
      } else if (this.state == 1) {
        this.getPPTbyTypeId(this.typeId);
      } else if (this.state == 2) {
        this.searchPPTList();
      }
    },
    // 搜索演示文稿
    async searchPPTList() {
      const { data: res } = await this.reqM12Service(
        "/education/search/time/" +
          this.queryInfo.pagenum +
          "/8/2?key=" +
          this.queryInfo.query,
        {
          params: this.queryInfo,
        },
        "get"
      );
      console.log(res);
      if (res.code !== 20000) {
        return this.$message.error("获取列表失败！");
      }
      this.pptlist = res.data.rows;
      this.total = res.data.total;
      // console.log(this.pptlist);
    },
    // 获取演示文稿的类型
    async getPPtTypes() {
      const { data: res } = await this.reqM2Service(
        "/education/manuscriptsTypes",
        "",
        "get"
      );
      console.log(res);
      if (res.code !== 20000) {
        return this.$message.error("获取列表失败！");
      }
      this.formattab = res.data;
      console.log(this.formattab);
    },
    // 按类型查找演示文稿
    async getPPTbyTypeId(id) {
      this.typeId = id;
      const { data: res } = await this.reqM2Service(
        "/education/manuscripts/search/searchByTypeId/" +
          id +
          "/" +
          this.queryInfo.pagenum +
          "/8",
        { params: this.queryInfo },
        "get"
      );
      if (res.code !== 20000) {
        return this.$message.error("获取列表失败！");
      }
      this.pptlist = res.data.rows;
      this.total = res.data.total;
      console.log(this.pptlist);
    },

    bindPreview(url) {
      console.log(url); // console.log(/(doc)|(ppt)|(pptx)|(xls)/.test(url)); // 跳转到空白页面预览，得等域名部署后
      if (/(doc)|(ppt)|(pptx)/.test(url)) {
        window.open(`http://ow365.cn/?i=23209&furl=${url}`);
        return;
      }
      return this.$message.error("获取演示文稿失败！");
    },
  },
};
</script>
<style lang="less" scoped>
.searchPart {
  .el-input-group__prepend .el-select {
    width: 100px;
  }
}
.btns {
  display: flex;
  flex-direction: row-reverse;
  a {
    color: #5a8239;
    text-decoration: none;
  }
}
.btns:hover {
  cursor: pointer;
}
.ccy-drvider {
  margin: 10px 0 7px 0;
}
.lxl-body {
  display: flex;
  justify-content: center;
  .lxl-breadcrumb {
    margin-top: 25px;
    margin-left: 18px;
    margin-bottom: -10px;
  }
}
.lxl-box {
  width: 1150px;
}
// 分类
.format {
  padding: 10px;
  > * {
    margin: 0 10px 0 10px;
  }
}
.image {
  width: 235px;
  height: 180px;
}
// 分页区域
.pagination {
  width: 100%;
  margin: 20px;
  text-align: center;
}
// 卡片区域
.lxl-card {
  .PPT-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .card {
      margin: 5px;
      width: 275px;
      height: 287px;
      .pptTitle {
        height: 47px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>